<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

</head>
<body>

<div id="app" class="container">
    <h3 class="d-flex justify-content-center">
        Vue JS Front End
    </h3>
    <h5 class="d-flex justify-content-center">
        Employee Management Portal
    </h5>

    <nav class="navbar navbar-expand-sm bg-light navbar-dark">
        <ul class="navbar-nav">
            <li class="nav-item m-l">
                <router-link class="btn btn-light btn-outline-primary" to="/home">Home</router-link>
                <router-link class="btn btn-light btn-outline-primary" to="/department">Department</router-link>
                <router-link class="btn btn-light btn-outline-primary" to="/employee">Employee</router-link>
            </li>
        </ul>
    </nav>
    <router-view></router-view>
</div>



<script src="variables.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="home.js"></script>
<script src="department.js"></script>
<script src="employee.js"></script>
<script src="app.js"></script>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
</body>
</html>